# 第一阶段：构建 Vue 应用
# 使用官方的 Node.js 镜像进行构建
FROM node:20-alpine AS builder

# 设置工作目录
WORKDIR /app

# 将 package.json 和 package-lock.json (或 yarn.lock) 复制到工作目录
# 单独复制这些文件以利用 Docker 的层缓存机制
# 只有当依赖文件发生变化时，才会重新安装依赖
COPY package*.json ./

# 安装项目依赖
RUN npm ci --only=production && npm cache clean --force

# 复制应用源码
COPY . .

# 构建生产环境的应用
# 确保你的 package.json 中有 build 脚本，通常是 "build": "vite build" 或 "vue-cli-service build"
# 如果你的构建命令不同，请修改此处
RUN npm run build

# 第二阶段：运行应用
# 使用轻量级的 nginx 镜像来提供静态文件
FROM nginx:alpine

# 删除默认的 nginx 配置
RUN rm -rf /etc/nginx/conf.d

# 从第一阶段复制构建好的文件到 nginx 的默认 HTML 目录
COPY --from=builder /app/dist /usr/share/nginx/html

# 将自定义的 nginx 配置文件复制到容器中
# 如果没有自定义配置，可以注释或删除此行
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露端口
# 告诉 Docker 容器监听 80 端口
EXPOSE 80

# nginx 通常以前台模式运行，容器会保持运行
# 默认的 nginx 镜像已经配置好以非守护进程模式运行
CMD ["nginx", "-g", "daemon off;"]